var g_timer;
var g_isPaused = false;

function pause()
{
	var pauseButton = document.getElementById('pause');
	var goButton = document.getElementById('go');
	g_isPaused = true;
	pauseButton.style.display = "none";
	goButton.style.display = "block";
	clearTimeout( g_timer );
}

function play( id )
{
	var pauseButton = document.getElementById('pause');
	var goButton = document.getElementById('go');
	g_isPaused = false;
	goButton.style.display = "none";
	pauseButton.style.display = "block";
	g_timer = setInterval(function()
	{
		slideShow( ++id );
	}, 3000);
}

function getPrev( id )
{
	var leftButton = document.getElementById('left');
	leftButton.onclick = function()
	{		
		clearTimeout( g_timer );
		
		g_isPaused = false;
		slideShow( --id );
		g_timer = setInterval(function()
		{
			slideShow( ++id );
		}, 3000);
	}
}

function getNext( id )
{
	var rightButton = document.getElementById('right');
	rightButton.onclick = function()
	{
		clearTimeout( g_timer );
		
		g_isPaused = false;
		slideShow( ++id );
		g_timer = setInterval(function()
		{
			slideShow( ++id );
		}, 3000);
	}
	
}

function close()
{
	var closeButton = document.getElementById('close');
	
	var slideDiv = document.getElementById('slideDiv');
	var topPanel = document.getElementById('topPanel');
	var imgDiv = document.getElementById('imgDiv');
	var left = document.getElementById('leftButton');
	var right = document.getElementById('rightButton');
	var leftButton = document.getElementById('left');
	var rightButton = document.getElementById('right');
	
	clearTimeout( g_timer );
	topPanel.style.display = "none";
	slideDiv.style.display = "none";
	imgDiv.style.display = "none";
	left.style.display = "none";
	right.style.display = "none";
	leftButton.style.display = "none";
	rightButton.style.display = "none";
	
	document.getElementById('slideImage').src = "";
	return;
}

function init( id )
{
	var topPanel = document.getElementById('topPanel');
	var closeButton = document.getElementById('close');
	var left = document.getElementById('leftButton');
	var right = document.getElementById('rightButton');
	var pauseButton = document.getElementById('pause');
	var goButton = document.getElementById('go');
	var leftButton = document.getElementById('left');
	var rightButton = document.getElementById('right');
	
	topPanel.style.backgroundColor = "";
	closeButton.style.display = "none";
	pauseButton.style.display = "none";
	goButton.style.display = "none";
	
	leftButton.style.display = "none";
	rightButton.style.display = "none";
	
	topPanel.onmouseover = function()
	{
		topPanel.style.backgroundColor = "#535353";
		
		closeButton.style.display = "block";
		if( g_isPaused )
		{
			goButton.style.display = "block";
		}
		else
		{
			pauseButton.style.display = "block";
		}
	}
	topPanel.onmouseout = function()
	{
		topPanel.style.backgroundColor = "";
		closeButton.style.display = "none";
		pauseButton.style.display = "none";
		goButton.style.display = "none";
	}
	
	pauseButton.onclick = function()
	{
		pause();
	}
	
	goButton.onclick =  function()
	{
		play( id );
	}
	
	left.onmouseover = function()
	{
		leftButton.style.display = "block";
		getPrev( id );
	}
	left.onmouseout = function()
	{
		leftButton.style.display = "none";
	}
	
	right.onmouseover = function()
	{
		rightButton.style.display = "block";
		getNext( id );
	}
	right.onmouseout = function()
	{
		rightButton.style.display = "none";
	}
	
	closeButton.onclick = function()
	{
		close();
	}
}

function locateButtons( marginTopImg, marginLeftImg, heightImg, widthImg )
{
	var topPanel = document.getElementById('topPanel');
	topPanel.style.width = widthImg + 'px';
	topPanel.style.top = marginTopImg + 'px';
	topPanel.style.left = marginLeftImg + 'px';
	
	var leftButton = document.getElementById('leftButton');
	var rightButton = document.getElementById('rightButton');
	leftButton.style.height = ( heightImg - 50 ) + 'px';
	rightButton.style.height = ( heightImg - 50 ) + 'px';
	
	var widthDiv = widthImg / 4 ;
	rightButton.style.width = widthDiv + 'px';
	leftButton.style.width = widthDiv + 'px';
	leftButton.style.top = ( marginTopImg + 50 ) + 'px';
	leftButton.style.left = marginLeftImg + 'px';
	rightButton.style.top = ( marginTopImg + 50 ) + 'px';
	rightButton.style.left = ( marginLeftImg + widthImg - widthDiv ) + 'px';
	
	var left = document.getElementById('left');
	var right = document.getElementById('right');
	left.style.top = (( heightImg - 100 - left.height ) / 2) + 'px';
	right.style.top = (( heightImg - 100 - right.height ) / 2) + 'px';
	right.style.left = ( widthDiv - right.width - 5 ) + 'px';
}

function loadImageHandler()
{
	var imgDiv = document.getElementById('imgDiv');
	var image = document.getElementById('slideImage');
	var slideDiv = document.getElementById('slideDiv');	
	var topPanel = document.getElementById('topPanel');
	var leftButton = document.getElementById('leftButton');
	var rightButton = document.getElementById('rightButton');
	
	var top = ( slideDiv.offsetHeight - image.height ) / 2 ;
	var left = (  slideDiv.offsetWidth - image.width ) / 2;
	
	locateButtons( top, left, image.height, image.width );
	
	imgDiv.style.top = top + 'px';
	imgDiv.style.left = left + 'px';
	
	image.style.display = 'block';
	topPanel.style.display = 'block';
	leftButton.style.display = 'block';
	rightButton.style.display = 'block';
}

function loadImageUrlHandler( responseText )
{
	var image = $('#slideImage');
	var topPanel = $('#topPanel');
	var leftButton = $('#leftButton');
	var rightButton = $('#rightButton');
	image.hide();
	topPanel.hide();
	leftButton.hide();
	rightButton.hide();
	image.attr( 'src',  "/php/uploaded/" + responseText );
	setTimeout( loadImageHandler, 100 );
}
	

function slideShow( id )
{
	init( id );
	$.ajax(
	{
		type: "GET",
		url: "/php/slide_show.php?img=" + id,
		success: loadImageUrlHandler
	});
	
}

function startSlide()
{
	$(document).ready(function() 
	{
		var slide = document.getElementById( 'startSlide' );
		var slideDiv =document.getElementById( 'slideDiv' );
		var imgDiv = document.getElementById( 'imgDiv' );
		slide.onclick = function()
		{
			var id = 0;
			g_isPaused = false;
			slideDiv.style.display = 'block';
			imgDiv.style.display = 'block';
			
			slideShow( id );
			g_timer = setInterval(function()
			{
				slideShow( ++id );
			}, 3000);
		}
	} );
}
